<template>
  <div>
    <!-- 表格 start -->
    <slot name="handle"></slot>

    <!-- 表格内容 -->
    <div class="m-table">
      <el-table
        border
        stripe
        :max-height="tableMaxHeight"
        :data="data"
        @selection-change="selectionChange"
      >
        <slot name="column"></slot>
      </el-table>

      <!-- 分页 -->
      <div
        class="m-table__pagination u-tc"
        v-if="isVisibleFooter && data.length"
      >
        <el-pagination
          background
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total"
          :current-page="currentPage"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "TableFull",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    columnData: {
      type: Array,
      default() {
        return [];
      }
    },
    total: {
      type: Number,
      default: 0
    },
    pageSizes: {
      type: Array,
      default() {
        return [50, 100, 500];
      }
    },
    pageSize: {
      type: Number,
      default: 50
    },
    currentPage: {
      type: Number,
      default: 1
    },
    isVisibleFooter: {
      type: Boolean,
      default: true
    },
    attachWidth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableMaxHeight: document.documentElement.clientHeight - 168
    };
  },
  computed: {
    ...mapState(["IS_VISIBLE_ASIDE"])
  },
  methods: {
    ...mapMutations(["SET_MAIN_WIDTH"]),

    selectionChange(val) {
      this.$emit("selection-change", val);
    },
    currentChange(val) {
      this.$emit("current-change", val);
    },
    sizeChange(val) {
      this.$emit("size-change", val);
    }
  },
  watch: {
    columnData: {
      immediate: true,
      deep: true,
      handler(column) {
        let clinetWidth = document.documentElement.clientWidth;

        // 留白20*2、表格不要滚动条1
        let total = 41;

        // 表格宽度
        column.forEach(item => {
          if (item.visible) {
            total += item.width || 80;
          }
        });

        // 左侧菜单宽度
        if (this.$route.meta.aside) {
          if (this.IS_VISIBLE_ASIDE) {
            total = Math.max(total + this.attachWidth, clinetWidth - 240, 960);
          } else {
            total = Math.max(total + this.attachWidth, clinetWidth - 100, 1100);
          }
        } else {
          total = Math.max(total + this.attachWidth, clinetWidth - 40, 1160);
        }

        this.SET_MAIN_WIDTH(total);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";
.m-table {
  &__button {
    position: absolute;
    top: -52px;
    right: 0;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    font-size: 14px;
    background: $--background-high;
    border: 1px solid $--border-major;
    color: $--text-minor;
    height: 32px;
    width: 32px;
    text-align: center;
    padding: 0;

    &:hover {
      border-color: $--text-high;
    }
  }
  &__pagination {
    padding-top: 20px;
  }
}
</style>